<template>
  <ScrollContainer class="pr-4" v-loading="loading" :loading-tip="t('common.loadingText')">
    <div
      v-for="item in dataSource"
      :key="item.id"
      class="cursor-pointer hover:underline"
      @click="handleFieldsItem(item)"
    >
      {{ item.name }}
    </div>
    <div class="flex justify-center mt-2">
      <Pagination
        v-model:current="paginationModel.current"
        v-model:pageSize="paginationModel.pageSize"
        simple
        :total="paginationModel.total"
        @change="paginationChange"
      />
    </div>
  </ScrollContainer>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { ScrollContainer } from '/@/components/Container';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  //   import { useMessage } from '/@/hooks/web/useMessage';
  //   const { createMessage } = useMessage();
  import { Pagination } from 'ant-design-vue';
  import { getIdeListTemplate, getIdeGetScriptTemplate } from '/@/api/flowManage/flowManage';
  const emits = defineEmits(['selField']);
  const loading = ref(false);
  const dataSource = ref<Recordable[]>([]);
  const paginationModel = reactive({
    total: 60,
    current: 1,
    pageSize: 20,
  });
  const paginationChange = (page, pageSize) => {
    console.log({ page, pageSize });
    fetch();
  };

  const queryParams = reactive({
    pageSize: 20,
    page: paginationModel.current,
  });

  const fetch = async () => {
    loading.value = true;
    queryParams.page = paginationModel.current;
    const { total, list } = await getIdeListTemplate(queryParams);
    dataSource.value = list;
    paginationModel.total = total;
    loading.value = false;
  };

  onMounted(() => {
    fetch();
  });

  //单击字段
  const handleFieldsItem = ({ id }) => {
    getIdeGetScriptTemplateData(id);
  };

  //取脚本模板的内容
  const getIdeGetScriptTemplateData = async (id) => {
    loading.value = true;
    const { script } = await getIdeGetScriptTemplate({ id, id });
    loading.value = false;
    handleSelField(script);
  };

  const handleSelField = (str) => {
    emits('selField', str);
  };
</script>
<style lang="css" scoped>
  :deep(.ant-pagination-simple-pager) {
    color: #fff;
  }
</style>
